<template>
	<view class="placeholder" v-if="componentData">
		<view class="placeholder-text">组件放置区域</view>
	</view>
	<view class="placeholder placeholder-toplimit" v-else>
		<view class="placeholder-text">组件放置已达上限</view>
	</view>
</template>

<script>
	export default {
		props: ['componentData']
	}
</script>

<style>
	.placeholder {
		width: 375px;
		height: 48px;
		background-color: #94b4eb;
		text-align: center;
		line-height: 42px;
		background-image: url('../../static/images/bg-placeholder.png');
		background-position: center
	}

	.placeholder .placeholder-text {
		background-color: #5487df;
		display: inline-block;
		font-size: 12px;
		color: #fff;
		width: 118px;
		height: 28px;
		line-height: 28px
	}

	.placeholder-toplimit {
		background-color: #ffebeb;
		background-image: url('../../static/images/bg-placeholder-top.png');
		background-position: center
	}

	.placeholder-toplimit .placeholder-text {
		background-color: #eb8b8b;
		color: #fff
	}
</style>
